<template>
  <div>
    <el-breadcrumb separator="/">
      <el-breadcrumb-item :to="{ path: '/home' }">首页</el-breadcrumb-item>
      <el-breadcrumb-item>权限管理</el-breadcrumb-item>
      <el-breadcrumb-item>角色列表</el-breadcrumb-item>
    </el-breadcrumb>
    <el-card>
      <el-table :data="rolesList">
        <el-table-column type="expand" label="展开">
          <template v-slot="{row}">
            <!-- item1 item2 item3  -->
            <el-row v-for="item1 in row.children" :key="item1.id" style="background:#cdcdcd;padding:20px;margin:20px;">
              <el-col :span="4" style="display:flex;align-items:center;height:100%;margin-top:100px;">
                <el-tag>{{item1.authName}}</el-tag>
                <i class="el-icon-caret-right"></i>
              </el-col>
              <el-col :span="20">
                <el-row v-for="item2 in item1.children" :key="item2.id"
                  style="background:#fff;margin:20px 0;padding:20px 0;">
                  <el-col :span="4">
                    <el-tag type="warning">{{item2.authName}}</el-tag>
                    <i class="el-icon-caret-right"></i>
                  </el-col>
                  <el-col :span="20">
                    <el-tag type="danger" v-for="item3 in item2.children" :key="item3.id" closable
                      @close="handleClose(row,item3.id)">
                      {{item3.authName}}
                    </el-tag>
                  </el-col>
                </el-row>

              </el-col>
            </el-row>

          </template>
        </el-table-column>
        <el-table-column type="index" label="#"></el-table-column>
        <el-table-column prop="roleName" label="角色名称"></el-table-column>
        <el-table-column prop="roleDesc" label="角色描述"></el-table-column>
        <el-table-column label="操作">
          <template v-slot="{row}">
            <el-button type="primary" size="mini" icon="el-icon-edit"></el-button>
            <el-button type="danger" size="mini" icon="el-icon-delete">
            </el-button>
            <el-tooltip effect="dark" content="分配权限" placement="top" :enterable="false">
              <el-button @click="showRightDialog(row)" type="warning" size="mini" icon="el-icon-setting"></el-button>
            </el-tooltip>
          </template>
        </el-table-column>
      </el-table>
    </el-card>

    <el-dialog title="分配权限" :visible.sync="rightDialogVisible" width="30%">
      <!-- alt + z  -->
      <el-tree ref="mytree" :default-checked-keys="defKeys" :data="rightsList" default-expand-all show-checkbox
        :props="{label:'authName'}" node-key="id"></el-tree>
      <template v-slot:footer>
        <el-button plain>取消</el-button>
        <el-button type="primary" @click="saveRights">确定</el-button>
      </template>
    </el-dialog>
  </div>
</template>

<script>
export default {
  data () {
    return {
      rightDialogVisible: false,
      rolesList: [],
      rightsList: [],
      defKeys: [],
      roleId: null// 角色id
    }
  },
  methods: {
    async saveRights () {
      // 收集所有选中的（全选、半选）
      const rids = [...this.$refs.mytree.getHalfCheckedKeys(), ...this.$refs.mytree.getCheckedKeys()].join(',')
      console.log(rids)
      await this.$http.post(`roles/${this.roleId}/rights`, { rids })
      this.rightDialogVisible = false
      this.getRolesList()
    },
    async showRightDialog (row) {
      this.roleId = row.id
      const { data: res } = await this.$http.get('rights/tree')
      this.rightsList = res.data
      console.log(this.rightsList)
      console.log(row)
      const arr = []
      // 100级 思路一 row item1 item2 只收集三级的id值
      row.children.forEach(item1 => {
        if (item1.children && item1.children.length > 0) { // 逻辑运算符
          item1.children.forEach(item2 => {
            if (item2.children && item2.children.length > 0) {
              item2.children.forEach(item3 => {
                arr.push(item3.id)
              })
            }
          })
        }
      })
      this.defKeys = arr
      this.rightDialogVisible = true
      // 递归要有退出的条件，否则就是死循环 某一层没有children

      // 思路二 递归
      // const arr = []
      // function fn (obj) {
      //   if (obj.children && obj.children.length > 0) {
      //     obj.children.forEach(item => {
      //       fn(item)
      //     })
      //   } else { // 退出条件
      //     arr.push(obj.id)
      //   }
      // }

      // fn(row)
      // console.log(arr)

      // 当你发现里面做的事情和外面做的事情一样的时候

      // console.log(arr)
      // this.defKeys = arr
      // this.rightDialogVisible = true
    },
    handleClose (row, id) {
      this.$confirm('此操作将永久删除该权限, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(async () => {
        const { data: res } = await this.$http.delete(`roles/${row.id}/rights/${id}`)
        // row是角色这一行
        row.children = res.data
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除'
        })
      })
    },
    async getRolesList () {
      const { data: res } = await this.$http.get('roles')
      this.rolesList = res.data
      console.log(this.rolesList)
    }
  },
  computed: {},
  watch: {},
  filters: {},
  components: {},
  created () {
    this.getRolesList()
  },
  mounted () { }
}
</script>

<style scoped lang='less'>
.el-tag {
  margin: 20px;
}
</style>
